<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>薪资想过万，代码敲三遍</title>
    <!--  第1步，引入echarts库文件 -->
    <script src="./lib/echarts.min.js"></script>
    <style>
      .box {
        width: 600px;
        height: 400px;
        background-color: pink;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <!-- 第2步，准备具备宽高的盒了 -->
    <div class="box"></div>
    <script>
      // 第3步，创建echarts实例
      // echarts.init(dom盒子)
      const myChart = echarts.init(document.querySelector('.box'))
      // 第4步，准备配置项和数据
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000',
                },
              },
              150,
              80,
              70,
              110,
              130,
            ],
            type: 'bar',
          },
        ],
      }
      // 第5步，设置配置项，生成图表
      myChart.setOption(option)
    </script>
  </body>
</html>
